<template>
  <div class="form-contain">
    <el-header style="font-size: 20px; font-weight: bold">
      <i class="el-icon-s-order" style="margin-right: 15px"></i>
      <span>中台面板</span>
    </el-header>
    <div class="report-contain">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" class="mgb20" style="height: 252px">
            <div class="user-info">
              <div>
                <div class="user-info-name"></div>
                <div>中台状态</div>
              </div>
            </div>
            <div class="user-info-list">
              系统时间：
              <span>{{ sys_time }}</span>
            </div>
            <div class="user-info-list">
              系统状态：
              <span>授权版</span>
            </div>
            <div class="user-info-list">
              CPU状态：
              <span>{{ sys_cpu }}</span>
            </div>
            <div class="user-info-list">
              内存状态：
              <span>{{ sys_mem }}</span>
            </div>
            <div class="user-info-list">
              网络状态：
              <span>{{ sys_net }}KB/S</span>
            </div>
          </el-card>
          <el-card shadow="hover" style="height: 252px">
            <div slot="header" class="clearfix">
              <span>分布式节点状态</span>
            </div>
            <el-table
              border
              tooltip-effect="dark"
              :data="tableData"
              height="150"
            >
              <el-table-column prop="node_ip" label="节点地址"></el-table-column>
              <el-table-column prop="node_port" label="节点端口"></el-table-column>
              <el-table-column prop="node_name" label="节点所属"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20" class="mgb20">
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-1">
                  <i class="el-icon-more grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num">{{ node_count }}</div>
                    <div>分布式节点</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-2">
                  <i class="el-icon-s-comment grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num">7</div>
                    <div>系统消息</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-3">
                  <i class="el-icon-pie-chart grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num">{{ vuln_amount }}</div>
                    <div>漏洞库总量</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-card shadow="hover" style="height: 403px">
            <div slot="header" class="clearfix">
              <span>近期任务</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="gotolink"
              >添加</el-button
              >
            </div>
            <el-table :data="todoList" :show-header="false">
              <el-table-column prop="task_name" width="680"></el-table-column>
              <el-table-column width="50">
                <template>
                  <i @click="dialogVisible = true" class="el-icon-edit"></i>
                  <el-dialog
                    title="修改任务名称"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"
                  >
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false"
                      >取 消</el-button
                      >
                      <el-button type="primary" @click="dialogVisible = false"
                      >确 定</el-button
                      >
                    </span>
                  </el-dialog>
                  <i @click="open" class="el-icon-delete"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Schart from 'vue-schart'
import bus from './common/bus'
export default {
  name: 'dashboard',
  data() {
    return {
      tableData: [],
      vuln_amount: '',
      vuln_high: '',
      vuln_mid: '',
      vuln_low: '',
      sys_time: '',
      sys_cpu: '',
      sys_mem: '',
      sys_net: '',
      node_count: '',
      name: localStorage.getItem('ms_username'),
      input: '',
      todoList: [],
      data: [
        {
          name: '2018/09/04',
          value: 1083,
        },
        {
          name: '2018/09/05',
          value: 941,
        },
        {
          name: '2018/09/06',
          value: 1139,
        },
        {
          name: '2018/09/07',
          value: 816,
        },
        {
          name: '2018/09/08',
          value: 327,
        },
        {
          name: '2018/09/09',
          value: 228,
        },
        {
          name: '2018/09/10',
          value: 1065,
        },
      ],
      options: {
        type: 'bar',
        title: {
          text: '最近一周安全状况柱状图',
        },
        xRorate: 25,
        labels: ['周一', '周二', '周三', '周四', '周五'],
        datasets: [
          {
            label: '安全',
            data: [234, 278, 270, 190, 230],
          },
          {
            label: '轻危',
            data: [164, 178, 190, 135, 160],
          },
          {
            label: '高危',
            data: [144, 198, 150, 235, 120],
          },
        ],
      },
      options2: {
        type: 'line',
        title: {
          text: '最近几个月安全趋势图',
        },
        labels: ['6月', '7月', '8月', '9月', '10月'],
        datasets: [
          {
            label: '安全',
            data: [234, 278, 270, 190, 230],
          },
          {
            label: '轻微',
            data: [164, 178, 150, 135, 160],
          },
          {
            label: '高危',
            data: [74, 118, 200, 235, 90],
          },
        ],
      },
      dialogVisible: false
    }
  },
  components: {
    Schart,
  },
  computed: {
    role() {
      return this.name === 'admin' ? '超级管理员' : '普通用户'
    },
  },
  // created() {
  //     this.handleListener();
  //     this.changeDate();
  // },
  // activated() {
  //     this.handleListener();
  // },
  // deactivated() {
  //     window.removeEventListener('resize', this.renderChart);
  //     bus.$off('collapse', this.handleBus);
  // },
  methods: {
    changeDate() {
      const now = new Date().getTime()
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000)
        item.name = `${date.getFullYear()}/${
          date.getMonth() + 1
        }/${date.getDate()}`
      })
    },
    // handleListener() {
    //     bus.$on('collapse', this.handleBus);
    //     // 调用renderChart方法对图表进行重新渲染
    //     window.addEventListener('resize', this.renderChart);
    // },
    // handleBus(msg) {
    //     setTimeout(() => {
    //         this.renderChart();
    //     }, 200);
    // },
    // renderChart() {
    //     this.$refs.bar.renderChart();
    //     this.$refs.line.renderChart();
    // }

    gotolink() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1)

      //指定跳转地址
      this.$router.push('/example')
    },

    handleClose(done) {
      this.$confirm('是否取消修改？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    open() {
      this.$confirm('此操作将删除该扫描记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },

  mounted() {
    const url = 'http://localhost:5000/vuln'
    axios.get(url).then((response) => {
      const result = response.data
      this.vuln_amount = result.amount
      this.vuln_high = result.high
      this.vuln_mid = result.mid
      this.vuln_low = result.low
      this.sys_time = result.sys_time
      this.sys_cpu = result.sys_cpu
      this.sys_mem = result.sys_mem
      this.sys_net = result.sys_net
    })
    const url2 = 'http://localhost:5000/system'
    axios.get(url2).then((response_sys) => {
      const result2 = response_sys.data
      this.sys_time = result2.sys_time
      this.sys_cpu = result2.sys_cpu
      this.sys_mem = result2.sys_mem
      this.sys_net = result2.sys_net
    })
    const url3 = 'http://localhost:5000/history_task'
    axios.get(url3).then((response_task) => {
      const result3 = response_task.data
      this.todoList = result3.tableData
    })
    const url4 = 'http://localhost:5000/node'
    axios.get(url4).then(response => {
      const result = response.data
      this.tableData = result.tableData
      this.node_count = result.node_count
    })
  },
}
</script>

<style scoped>
.el-header {
  background-color: rgba(51, 48, 51, 0.219);
  color: #333;
  line-height: 60px;
}
.report-contain {
  margin: 5px;
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
</style>
